<!--
 * @Description: 设置平台预算
 * @Author: liyujie
 * @Date: 2021/07/09
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/09
-->
<template>
    <section class="wrapper">
        <el-dialog
            :title="`${mode === 'edit' ? '设置' : '查看'}平台补贴预算`"
            :visible.sync="dialogVisible"
            width="828px"
            :close-on-click-modal="false"
        >
            <div class="dialog-content">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    :disabled="mode === 'detail'"
                >
                    <div class="form-header">
                        <el-form-item
                            label="平台补贴总预算"
                            prop="money"
                            label-width="122px"
                            class="is-required"
                            style="margin-bottom: 24px"
                        >
                            <el-input
                                v-model="ruleForm.money"
                                size="medium"
                                :placeholder="!ruleForm.money && mode === 'detail' ? '未设置' :'请输入平台补贴总预算'"
                            >
                                <span slot="suffix">元</span>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="form-content">
                        <!--平台优惠券预算设置-->
                        <div class="form-row">
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    平台优惠券预算设置
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="coupon_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.coupon_money"
                                            size="medium"
                                            :placeholder="!ruleForm.coupon_money && mode === 'detail' ? '未设置' :'请输入平台优惠券预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <!--平台优惠券预算细分到岗位-->
                        <div class="form-group">
                            <div class="form-group__title">
                                平台优惠券预算细分到岗位
                            </div>
                            <div class="form-group__content">
                                <div class="form-row">
                                    <div
                                        class="form-item"
                                        v-for="(item,index) in ruleForm.coupon_list"
                                        :key="index"
                                    >
                                        <div class="form-item__label">
                                            {{ item.phaadmin_position_name }}
                                            <span
                                                style="color: #F95B56"
                                                v-if="item.is_enabled === -1"
                                            >(岗位已移除)</span>
                                        </div>
                                        <div class="form-item__content">
                                            <el-form-item
                                                :prop="`coupon_list[${index}].money`"
                                                :rules="rules.money_num"
                                                :show-message="false"
                                            >
                                                <el-input
                                                    v-model="item.money"
                                                    size="medium"
                                                    :placeholder="!item.money && mode === 'detail' ? '未设置' :'请输入岗位预算'"
                                                    style="width: 322px"
                                                    :disabled="item.is_enabled === -1"
                                                >
                                                    <span slot="suffix">元</span>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <div
                                            class="form-item__tips"
                                            v-if="item.is_enabled === -1"
                                        >
                                            当前已实际消耗金额
                                            <span style="color: #F95B56">¥{{ item.used_money }}</span>，剩余预算金额
                                            <span style="color: #2FBDB3;">¥{{ item.money - item.used_money }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--平台红包预算设置-->
                        <div class="form-row">
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    平台红包预算设置
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="red_packet_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.red_packet_money"
                                            size="medium"
                                            :placeholder="!ruleForm.red_packet_money && mode === 'detail' ? '未设置' :'请输入平台红包预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <!--平台红包预算细分到岗位-->
                        <div class="form-group">
                            <div class="form-group__title">
                                平台红包预算细分到岗位
                            </div>
                            <div class="form-group__content">
                                <div class="form-row">
                                    <div
                                        class="form-item"
                                        v-for="(item,index) in ruleForm.red_packet_list"
                                        :key="index"
                                    >
                                        <div class="form-item__label">
                                            {{ item.phaadmin_position_name }}
                                            <span
                                                style="color: #F95B56"
                                                v-if="item.is_enabled === -1"
                                            >(岗位已移除)</span>
                                        </div>
                                        <div class="form-item__content">
                                            <el-form-item
                                                :prop="`red_packet_list[${index}].money`"
                                                :rules="rules.money_num"
                                                :show-message="false"
                                            >
                                                <el-input
                                                    v-model="item.money"
                                                    size="medium"
                                                    :placeholder="!item.money && mode === 'detail' ? '未设置' :'请输入岗位预算'"
                                                    style="width: 322px"
                                                    :disabled="item.is_enabled === -1"
                                                >
                                                    <span slot="suffix">元</span>
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                        <div
                                            class="form-item__tips"
                                            v-if="item.is_enabled === -1"
                                        >
                                            当前已实际消耗金额
                                            <span style="color: #F95B56">¥{{ item.used_money }}</span>，剩余预算金额
                                            <span style="color: #2FBDB3;">¥{{ item.money - item.used_money }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--一卡通、一分钱平台优惠券预算设置-->
                        <div class="form-row">
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    一卡通折扣商品预算
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="vip_goods_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.vip_goods_money"
                                            size="medium"
                                            :placeholder="!ruleForm.vip_goods_money && mode === 'detail' ? '未设置' :'请输入一卡通折扣商品预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    一卡通1分钱商品预算
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="vip_free_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.vip_free_money"
                                            size="medium"
                                            :placeholder="!ruleForm.vip_free_money && mode === 'detail' ? '未设置' :'请输入一卡通折扣商品预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <!--新人专区、新人立减预算设置-->
                        <div class="form-row">
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    新人专区设置
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="welfare_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.welfare_money"
                                            size="medium"
                                            :placeholder="!ruleForm.welfare_money && mode === 'detail' ? '未设置' :'请输入新人专区预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    APP新人立减设置
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="new_user_discount_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.new_user_discount_money"
                                            size="medium"
                                            :placeholder="!ruleForm.new_user_discount_money && mode === 'detail' ? '未设置' :'请输入APP新人立减预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                        <!--社群专享预算设置-->
                        <div class="form-row">
                            <div class="form-item">
                                <div class="form-item__label is-required">
                                    社群专享价活动预算
                                </div>
                                <div class="form-item__content">
                                    <el-form-item
                                        prop="tool_group_goods_money"
                                        :rules="rules.money"
                                    >
                                        <el-input
                                            v-model="ruleForm.tool_group_goods_money"
                                            size="medium"
                                            :placeholder="!ruleForm.tool_group_goods_money && mode === 'detail' ? '未设置' :'请输入社群专享价活动预算'"
                                            style="width: 342px"
                                        >
                                            <span slot="suffix">元</span>
                                        </el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>

                    </div>
                </el-form>
            </div>
            <div class="dialog-footer">
                <el-button
                    size="small"
                    style="width: 100px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="width: 100px;margin-left: 52px"
                    v-if="mode === 'detail'"
                    @click="mode = 'edit'"
                >
                    编辑
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="width: 100px;margin-left: 52px"
                    v-if="mode !== 'detail'"
                    @click="handleConfirm"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {deepClone} from "@/assets/js/utils";
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: "BudgetSettingDialog",
    data() {
        const validateMoney = (rule, value, callback) => {
            if(Number(value) > this.ruleForm.money) {
                callback(new Error('不能超过平台补贴总预算'));
            } else {
                callback();
            }
        };

        return {
            dialogVisible: false,
            // 模式 detail查看 edit编辑
            mode: 'edit',
            ruleForm: {
                // 总预算
                money: '',
                // 平台优惠券
                coupon_money: '',
                // 平台红包
                red_packet_money: '',
                // 一卡通折扣商品
                vip_goods_money: '',
                // 一卡通1分钱商品
                vip_free_money: '',
                // 社群专享
                tool_group_goods_money: '',
                // app新人立减
                new_user_discount_money: '',
                // 新人专区
                welfare_money: '',
                // 优惠券岗位列表
                coupon_list: [],
                // 红包岗位列表
                red_packet_list: []
            },
            rules: {
                money: [
                    {required: true, message: '请输入预算金额', trigger: 'blur'},
                    {pattern: numberReg, message: '预算金额必须为数字', trigger: 'blur'},
                    {validator: validateMoney, trigger: 'blur'}
                ],
                money_num: [
                    {pattern: numberReg, message: '预算金额必须为数字', trigger: 'blur'}
                ]
            }
        };
    },
    watch: {},
    computed: {},

    methods: {
        /**
         * 显示弹窗
         */
        show(type = 'edit', data = this.ruleForm) {
            this.ruleForm = data;
            this.dialogVisible = true;
            this.mode = type;
        },

        /**
         * 显示弹窗
         */
        close() {
            this.dialogVisible = false;
        },

        /**
         * 点击确定
         */
        handleConfirm() {
            this.$refs['ruleForm'].validate((valid, props) => {
                if (valid) {
                    let params = deepClone(this.ruleForm);
                    let all_money = Number(params.coupon_money)
                        + Number(params.red_packet_money)
                        + Number(params.vip_goods_money)
                        + Number(params.vip_free_money)
                        + Number(params.tool_group_goods_money)
                        + Number(params.new_user_discount_money)
                        + Number(params.welfare_money);
                    let coupon_all_money = 0;
                    let red_packet_all_money = 0;
                    // 计算逻辑有问题

                    params.coupon_list.forEach(item => {
                        if(item.is_enabled === -1) {
                            coupon_all_money += Number(item.used_money);
                        } else {
                            coupon_all_money += Number(item.money);
                        }
                    });
                    params.red_packet_list.forEach(item => {
                        if(item.is_enabled === -1) {
                            red_packet_all_money += Number(item.used_money);
                        } else {
                            red_packet_all_money += Number(item.money);
                        }
                    });

                    // 岗位预算相加不超过优惠券总预算
                    if(coupon_all_money > Number(params.coupon_money)) {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: '岗位预算不能超过平台优惠券预算'
                        });
                        return false;
                    }

                    // 岗位预算相加不超过红包总预算
                    if(red_packet_all_money > Number(params.red_packet_money)) {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: '岗位预算不能超过平台红包预算'
                        });
                        return false;
                    }

                    // 校验预算相加不超过总预算
                    /*if(all_money > Number(params.money)) {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: '预算综合不能超过平台预算'
                        });
                        return false;
                    }*/

                    // 处理配置状态
                    params.coupon_list.forEach(item => {
                        if(item.is_enabled !== -1) {
                            item.is_enabled = item.money ? 1 : 0;
                        }
                    });
                    params.red_packet_list.forEach(item => {
                        if(item.is_enabled !== -1) {
                            item.is_enabled = item.money ? 1 : 0;
                        }
                    });

                    params.coupon_json = JSON.stringify(params.coupon_list);
                    params.red_packet_json = JSON.stringify(params.red_packet_list);
                    delete params.coupon_list;
                    delete params.red_packet_list;
                    this.$emit('confirm', params);

                } else {
                    // 校验不通过
                    this.$notify.warning({
                        title: '提示',
                        message: Object.values(props)[0][0].message
                    });
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    .dialog-content {
        /deep/ .el-form {
            .is-required {
                .el-form-item__label {
                    &:before {
                        content: "*";
                        display: inline-block;
                        color: #F56C6C;
                    }
                }
            }
            .el-form-item {
                margin-bottom: 0;
            }
            .el-form-item__label {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
            }
            .el-input__suffix {
                margin-right: 6px;
            }
        }
        .form-content {
            height: 508px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            overflow-y: auto;
            margin-bottom: 32px;
            padding: 24px;
            &::-webkit-scrollbar {
                width: 4px;
            }
            .form-row {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .form-item {
                    margin-bottom: 24px;
                    &__label {
                        margin-bottom: 12px;
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        &.is-required {
                            &:before {
                                content: "*";
                                display: inline-block;
                                color: #F56C6C;
                            }
                        }
                    }
                    &__tips {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-top: 12px;
                    }
                }
            }
            .form-group {
                background: #FBFBFB;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                margin-bottom: 24px;
                &__title {
                    height: 44px;
                    background: #FBFBFB;
                    border-radius: 4px 4px 0 0;
                    border-bottom: 1px solid #EEEEEE;
                    padding: 0 16px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    display: flex;
                    align-items: center;
                }
                &__content {
                    padding: 20px 24px 0;
                }
            }
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    /deep/ .el-dialog {
        margin-top: 10vh!important;
    }
}
</style>
